(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "../services/shopping", "./image-thumber", "./utiltiy", "react", "react-dom", "maishu-wuzhui", "maishu-ui-toolkit", "../error-handle", "json!websiteConfig"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const shopping_1 = require("../services/shopping");
    // import app from 'admin/application';
    const image_thumber_1 = require("./image-thumber");
    const utiltiy_1 = require("./utiltiy");
    const React = require("react");
    const ReactDOM = require("react-dom");
    const wuzhui = require("maishu-wuzhui");
    const ui = require("maishu-ui-toolkit");
    const error_handle_1 = require("../error-handle");
    const json_websiteConfig_1 = require("json!websiteConfig");
    requirejs({ context: json_websiteConfig_1.contextName }, ['less!controls/product-select-dialog']);
    let defaultState = () => ({ selecteItems: [] });
    class ProductSelectDialog extends React.Component {
        constructor(props) {
            super(props);
            this.state = defaultState();
            let shopping = new shopping_1.ShoppingService();
            shopping.error.add((sender, err) => error_handle_1.default(err));
            this.dataSource = new wuzhui.DataSource({
                select: (args) => {
                    return shopping.products(args);
                }
            });
            this.selectArguments = { maximumRows: 18, filter: '!OffShelve' };
            this.dataSource.selected.add((sender, args) => {
                this.setState({ products: args.dataItems });
            });
        }
        static show(confirmSelectedProducts) {
            instance.confirmSelectedProducts = confirmSelectedProducts;
            instance.state = defaultState();
            instance.setState(instance.state);
            instance.selectArguments.startRowIndex = 0;
            instance.dataSource.select(instance.selectArguments);
            ui.showDialog(element);
        }
        selecteProduct(p) {
            if (this.state.selecteItems.indexOf(p) >= 0) {
                // this.state.selecteItems = this.state.selecteItems.filter(o => o != p);
                this.setState({ selecteItems: this.state.selecteItems.filter(o => o != p) });
            }
            else {
                this.state.selecteItems.push(p);
            }
            this.setState(this.state);
        }
        setPagingBar(e) {
            if (!e || wuzhui.Control.getControlByElement(e))
                return;
        }
        componentDidMount() {
            let pagingBar = new wuzhui.NumberPagingBar({
                // dataSource: this.dataSource,
                loadData: (pageIndex) => {
                    this.selectArguments.startRowIndex = pageIndex * this.selectArguments.maximumRows;
                    this.dataSource.select(this.selectArguments);
                },
                element: this.pagingBarElement,
                pagerSettings: {
                    activeButtonClassName: 'active',
                    buttonWrapper: 'li',
                    buttonContainerWraper: 'ul',
                    showTotal: false,
                },
            });
            let ul = this.pagingBarElement.querySelector('ul');
            ul.className = "pagination";
        }
        renderImage(e, src) {
            if (!e)
                return;
            ui.renderImage(e);
        }
        search(text) {
            this.dataSource.select();
        }
        render() {
            let { products, selecteItems } = this.state;
            let status;
            if (products == null)
                status = 'loading';
            else if (products.length == 0)
                status = 'none';
            else
                status = 'finish';
            return (React.createElement("div", { className: "modal-dialog modal-lg" },
                React.createElement("div", { className: "modal-content" },
                    React.createElement("div", { className: "modal-header" },
                        React.createElement("button", { type: "button", className: "close", onClick: () => ui.hideDialog(element) },
                            React.createElement("span", { "aria-hidden": "true" }, "\u00D7")),
                        React.createElement("h4", { className: "modal-title" }, "\u9009\u62E9\u5546\u54C1")),
                    React.createElement("div", { className: "modal-body" },
                        React.createElement("div", { className: "input-group" },
                            React.createElement("input", { type: "text", className: "form-control pull-right", placeholder: "\u8BF7\u8F93\u5165SKU\u6216\u540D\u79F0\u3001\u7C7B\u522B", style: { width: '100%' }, ref: (e) => this.searchInput = e || this.searchInput }),
                            React.createElement("span", { className: "input-group-btn" },
                                React.createElement("button", { className: "btn btn-primary btn-sm pull-right", onClick: () => this.search(this.searchInput.value) },
                                    React.createElement("i", { className: "icon-search" }),
                                    React.createElement("span", null, "\u641C\u7D22")))),
                        React.createElement("hr", { className: "row" }),
                        status == 'loading' ?
                            React.createElement("div", { className: "loading" }, "\u6570\u636E\u6B63\u5728\u52A0\u8F7D\u4E2D...") : null,
                        status == 'none' ?
                            React.createElement("div", { className: "norecords" }, "\u6682\u65E0\u5546\u54C1\u6570\u636E") : null,
                        status == 'finish' ?
                            React.createElement("div", { className: "products" }, products.map(p => {
                                let selected = selecteItems.indexOf(p) >= 0;
                                return React.createElement("div", { key: p.Id, className: "product col-lg-2", onClick: () => this.selecteProduct(p) },
                                    React.createElement(image_thumber_1.default, { imagePath: p.ImagePath, text: p.Name, selectedText: selecteItems.indexOf(p) >= 0 ? `${selecteItems.indexOf(p) + 1}` : '' }));
                            }))
                            : null,
                        React.createElement("div", { className: "clearfix" })),
                    React.createElement("div", { className: "modal-footer" },
                        React.createElement("div", { className: "paging-bar pull-left", ref: (e) => this.pagingBarElement = e || this.pagingBarElement }),
                        React.createElement("button", { name: "cancel", type: "button", className: "btn btn-default", onClick: () => ui.hideDialog(element) }, "\u53D6\u6D88"),
                        React.createElement("button", { name: "ok", type: "button", className: "btn btn-primary", onClick: () => {
                                if (this.confirmSelectedProducts) {
                                    this.confirmSelectedProducts(selecteItems);
                                }
                                ui.hideDialog(element);
                            } }, "\u786E\u5B9A")))));
        }
    }
    exports.ProductSelectDialog = ProductSelectDialog;
    let element = utiltiy_1.createDialogElement('product-select-dialog');
    let instance = ReactDOM.render(React.createElement(ProductSelectDialog, null), element);
});
